<script setup lang="tsx">
import { useEnumeratePicker } from '@/utils'
const { t } = useI18n()
const { push } = useRouter()
const isExpanded = ref(true)
const togglePanel = () => {
  isExpanded.value = !isExpanded.value
}

// 使用具体类型定义 props
const props = defineProps({
  currentRow: {
    type: Object,
    default: () => null
  },
  operatorOptions: {
    type: Object,
    default: () => null
  }
})

// 定义 dataList 变量
const dataList = ref<any[]>([])
if (props.currentRow.isWholesal) {
  dataList.value = props.currentRow.order_list || []
} else {
  dataList.value = props.currentRow.list || []
}
//跳转详情
const handleDetail = (row: Record<string, any>) => {
  push({
    path: `/order/order-management/detail`,
    query: { id: row.id }
  })
}
</script>

<template>
  <el-card shadow="always">
    <div @click="togglePanel" class="header">
      <span>{{ t('order.orderSended') }}</span>
      <el-icon v-if="isExpanded">
        <el-icon-arrow-down />
      </el-icon>
      <el-icon v-else>
        <el-icon-arrow-right />
      </el-icon>
    </div>
    <el-collapse-transition>
      <div v-show="isExpanded" class="w-full">
        <el-table
          :data="dataList"
          highlight-current-row
          stripe
          border
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            :label="t('wholesalOrder.orderNo')"
            prop="order_no"
            min-width="250"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.username')"
            prop="user_name"
            min-width="250"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.deliveryAddress')"
            prop="shipping_address"
            min-width="350"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('wholesalOrder.receiptMethod')"
            min-width="200"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ useEnumeratePicker(operatorOptions.delivery_method, row.delivery_method) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('wholesalOrder.logisticsCosts')"
            prop="logistics_fee"
            min-width="200"
            :show-overflow-tooltip="true"
          />
          <el-table-column fixed="right" :label="t('common.operation')" width="200">
            <template #default="{ row }">
              <el-button type="success" @click="handleDetail(row)" size="small">
                {{ t('wholesalOrder.detail') }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-collapse-transition>
  </el-card>
</template>

<style scoped>
.header {
  display: flex;
  height: 40px;
  padding: 0 10px;
  margin-bottom: 10px;
  font-weight: 900;
  cursor: pointer;
  background-color: #f3f3f3;
  border-radius: 5px;
  align-items: center;
  justify-content: space-between;
}
</style>
